<template>
    <div class="head_box_info">
        <div class="head_content">
            <div class="head-left">
                <div @click="$router.push({name: 'home'})" class="title_meas">
                    <el-image src="/static/images/logo.png" class="site-logo"></el-image>
                </div>
                <div class="head_info_list">
                    <div
                        class="nav"
                        :class="{'active_nav':$route.meta.login=='groups'}"
                        @click="$router.push({name: 'groups'})"
                        @mouseout="hiddenProduct"
                        @mouseover="productShow">
                        产品商城
                    </div>
                    <div
                        :class="{'active_nav':$route.meta.login=='technology'}"
                        class="nav"
                        @click.stop="$router.push({name: 'tcenter'})"
                        @mouseout="hiddenTechnology"
                        @mouseover="timeTechnologyShow">
                        技术中心
                    </div>
                    <div
                        class="nav"
                        :class="{'active_nav':$route.meta.login=='service'}"
                        @click="$router.push({name: 'scenter'})"
                        @mouseout="hiddenNews"
                        @mouseover="newsCarShow">
                        服务中心
                    </div>
                    <div
                        class="nav"
                        :class="{'active_nav':$route.meta.login=='about'}"
                        @click="$router.push({name: 'about'})"
                        style="margin-right: 0">
                        关于我们
                    </div>
                </div>
            </div>
            <div class="head-content-right">
                <div v-if="showSearch" class="search_box">
                    <img src="../assets/search-black.png">
                    <input placeholder="搜索产品" v-model="searchTxt" @keydown.enter='goSearch(searchTxt)'/>
                </div>
                <div class="user_infos">
                    <template v-if="userInfo">
                        <div class="user_info_box">
                            <div class="head_box_infos">
                                <div class="userinfo">
                                    <el-image v-if="false" fit="cover" class="head_infos_img"
                                              :src="userInfo.image ? userInfo.image : '../assets/info-head.png'">
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-s-custom"></i>
                                        </div>
                                    </el-image>
                                    <div class="username">{{userInfo.name}}</div>
                                </div>
                                <div class="vutpuy_cars">
                                    <div class="item_box" @click="$router.push({name: 'userInfo'})">
                                        <img src="../assets/personal-red-gerenzhogxin@2x.png" class="active">
                                        <img src="../assets/personal-black-gerenzhongxin@2x.png" class="no_active">
                                        <div>个人中心</div>
                                    </div>
                                    <div class="item_box" @click="loginOut">
                                        <img src="../assets/personal-black-tuichudenglu@2x(1).png" class="active">
                                        <img src="../assets/personal-black-tuichudenglu@2x.png" class="no_active">
                                        <div>退出登陆</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <div class="login_status">
                            <div @click="$router.push({name: 'login'})">登录</div>
                            <div class="lines"></div>
                            <div @click="$router.push({name: 'register'})">注册</div>
                        </div>
                    </template>
                </div>
                <div v-if="backendUrl" class="backend">
                    <a class="backend-link" target="_blank" :href="backendUrl">管理后台</a>
                </div>
            </div>
        </div>
        <div class="top_info_case" @mouseout="hiddenProduct" @mouseover="productShow" :class="{'top_info_active_case':proudShow}">
            <div class="content_box_info_tabs">
                <template>
                    <div class="prdouct">
                        <div class="top_infos" @click="$router.push({name: 'home'})">
                            <div>返回首页</div>
                            <img src="../assets/return-selected.png"/>
                        </div>
                        <div class="group_tab">
                            <div class="box_items" v-for="(item,index) in groupList" :key="index">
                                <div class="group_names" @click="goGroupTwo(item)">
                                    <img :src="item.icon">
                                    <div>{{ item.name }}</div>
                                </div>
                                <div class="group_twos">
                                    <div @click="goGroupTwo(items)" class="group_tab_right" v-for="(items,indexs) in item.list" :key="indexs">
                                        {{items.name}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <div class="top_info_case" @mouseout="hiddenNews" @mouseover="newsCarShow" :class="{'new_tabs_serve':newsShow}">
            <div class="content_box_info_tabs">
                <template>
                    <div class="prdouct">
                        <div class="top_infos" @click="$router.push({name: 'home'})">
                            <div>返回首页</div>
                            <img src="../assets/return-selected.png"/>
                        </div>
                        <div class="tab_chang_caser_infos">
                            <div class="tab_infos_case" v-for="(item,index) in newsGroup" :key="index">
                                <div class="parent_titles">{{item.name}}</div>
                                <ul :style="{columnCount:item.list.length<=4?'1':(parseInt(item.list.length/4)+1),width:item.list.length<=4?'120px':(parseInt(item.list.length/4)+1)*140+'px'}">
                                    <li @click="changServeTitle(items.id)" v-for="(items,indexs) in item.list" :key="indexs">{{items.title}}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <div class="top_info_case" @mouseout="hiddenTechnology" @mouseover="timeTechnologyShow" :class="{'new_tabs_transm':technologyShow}">
            <div class="content_box_info_tabs">
                <template>
                    <div class="prdouct">
                        <div class="top_infos" @click="$router.push({name: 'home'})">
                            <div>返回首页</div>
                            <img src="../assets/return-selected.png"/>
                        </div>
                        <div class="tab_chang_caser_infos">
                            <div class="tab_infos_case" v-for="(item,index) in severGroup" :key="index">
                                <div class="parent_titles">{{item.name}}</div>
                                <ul :style="{columnCount:item.list.length<=4?'1':(parseInt(item.list.length/4)+1),width:item.list.length<=4?'120px':(parseInt(item.list.length/4)+1)*140+'px'}">
                                    <li @click="changTitle(items.id)" v-for="(items,indexs) in item.list" :key="indexs">{{items.title}}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
    import {getGroupInfo, getNewsGroup} from "@/api/apis";

    export default {
        name: "headrTop",
        data() {
            return {
                groupList: [],
                proudShow: false,
                newsGroup: [],
                newsShow: false,
                severGroup: [],
                technologyShow: false,
                searchTxt: ''
            }
        },
        props: {
            showSearch: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            userInfo() {
                return this.$store.state.userInfo ? this.$store.state.userInfo : ''
            },
            backendUrl() {
                return this.$store.state.backendUrl ? this.$store.state.backendUrl : false;
            }
        },
        created() {
            if (window.localStorage.getItem('token')) {
                this.$store.commit('GetUserInfo');
            }
            this.$store.commit('getSiteConfig');
        },

        mounted() {
            this.GetGroupInfo()
            this.GetNewsGroup()
            this.GetSeverGroup()
        },
        methods: {
            goSearch(e) {
                this.$router.push({name: 'search', query: {name: e}})
            },
            loginOut() {
                window.localStorage.removeItem('token')
                this.$store.commit('userNo');
                this.$router.push({name: 'home'});
            },
            goGroupTwo(e) {
                this.proudShow = false;
                if (e.is_end) {
                    this.$router.push({name: 'filterGroups', query: {group_id: e.id}})
                } else {
                    this.$router.push({name: 'groups', query: {group_id: e.id}})
                }
            },
            changTitle(e) {
                this.technologyShow = false;
                this.$router.push({name: 'tcenter', query: {id: e}})
            },
            changServeTitle(e) {
                this.newsShow = false;
                this.$router.push({name: 'scenter', query: {id: e}})
            },
            productShow() {
                this.proudShow = true
            },
            hiddenProduct() {
                this.proudShow = false
            },
            //服务
            GetNewsGroup() {
                let data = {type: 2}
                getNewsGroup(data).then(res => {
                    this.newsGroup = res.data
                })
            },
            newsCarShow() {
                this.newsShow = true
            },
            hiddenNews() {
                this.newsShow = false
            },
            //技术
            GetSeverGroup() {
                let data = {type: 1}
                getNewsGroup(data).then(res => {
                    this.severGroup = res.data
                })
            },
            timeTechnologyShow() {
                this.technologyShow = true
            },
            hiddenTechnology() {
                this.technologyShow = false
            },

            GetGroupInfo() {
                let data = {group_id: 0}
                getGroupInfo(data).then(res => {
                    this.groupList = res.data.list
                })
            },
        }
    }
</script>

<style scoped lang="less">
    .head_box_info {
        height: 88px;
        background: #FFFFFF;
        cursor: pointer;
        position: relative;
        
        .head_content {
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            
            .head-left {
                display: flex;
                align-items: center;
                
                .title_meas {
                    font-size: 24px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #000000;
                    margin-right: 60px;
                    
                    .site-logo {
                        height: 60px;
                        width: 120px;
                    }
                }
                
                .head_info_list {
                    display: flex;
                    align-items: center;
                    height: 100%;
                    
                    .nav {
                        font-size: 16px;
                        font-family: Microsoft YaHei;
                        font-weight: bold;
                        color: #000000;
                        height: 100%;
                        line-height: 88px;
                        margin-right: 74px;
                    }
                    
                    .active_nav {
                        color: #B11E24;
                    }
                    
                    .tab_navs_name:hover {
                        opacity: 1;
                    }
                }
            }
            
            .head-content-right {
                display: flex;
                align-items: center;
                
                .user_infos {
                    width: 111px;
                    
                    .login_status {
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: bold;
                        color: #000000;
                        
                        .lines {
                            width: 2px;
                            height: 14px;
                            background: #000000;
                            margin: 0 5px;
                        }
                    }
                    
                    .user_info_box {
                        
                        .head_box_infos {
                            text-align: right;
                            position: relative;
                            
                            .userinfo {
                                position: relative;
                                text-align: center;
                                
                                .head_infos_img {
                                    width: 30px;
                                    height: 30px;
                                    border-radius: 50%;
                                }
                                
                                .username {
                                    color: #505050;
                                }
                                
                                &:after, &::after {
                                    content: "";
                                    background-color: #9D9D9D;
                                    width: 1px;
                                    height: 80%;
                                    position: absolute;
                                    top: 10%;
                                    right: 0;
                                }
                            }
                            
                            .vutpuy_cars {
                                position: absolute;
                                background: #FFFFFF;
                                box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
                                width: 100%;
                                padding: 10px 0 3px;
                                z-index: 8;
                                opacity: 0;
                                
                                .item_box {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    font-size: 14px;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    margin-bottom: 7px;
                                    color: #000000;
                                    
                                    img {
                                        width: 12px;
                                        height: 14px;
                                        object-fit: contain;
                                        margin-right: 7px;
                                    }
                                    
                                    .no_active {
                                        display: inline-block;
                                    }
                                    
                                    .active {
                                        display: none;
                                    }
                                }
                                
                                .item_box:hover {
                                    color: #B11E24;
                                }
                                
                                .item_box:hover .active {
                                    display: inline-block;
                                }
                                
                                .item_box:hover .no_active {
                                    display: none;
                                }
                            }
                        }
                        
                        .head_box_infos:hover .vutpuy_cars {
                            opacity: 1;
                        }
                    }
                }
                
                .search_box {
                    width: 154px;
                    height: 42px;
                    background: #FFFFFF;
                    border: 1px solid #000000;
                    border-radius: 21px;
                    box-sizing: border-box;
                    margin: 0 0 0 99px;
                    padding: 0 16px;
                    display: flex;
                    align-items: center;
                    
                    img {
                        width: 16px;
                        height: 16px;
                        margin-right: 11px;
                    }
                    
                    input {
                        width: 90px;
                        border: none;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                    }
                }
                
                .backend {
                    padding: 0 0 0 30px;
                    color: #9D9D9D;
                    
                    .backend-link {
                        text-decoration: none;
                        
                        &:visited, &:hover, &:active {
                            color: #9D9D9D;
                        }
                    }
                }
            }
        }
        
        .top_info_case {
            width: 100%;
            padding: 20px 0;
            background: rgba(255, 255, 255, 1);
            //border: 1px solid #9D9D9D;
            box-sizing: border-box;
            position: absolute;
            box-sizing: border-box;
            top: 88px;
            display: none;
            z-index: 0;
            box-shadow: 0 0 1px 1px rgba(241, 241, 241, 1);
            
            .content_box_info_tabs {
                width: 1200px;
                margin: 0 auto;
                
                .prdouct {
                    /*width: 630px;*/
                    /*margin: 0 auto;*/
                    margin-left: 180px;
                    
                    .top_infos {
                        margin-bottom: 19px;
                        display: flex;
                        align-items: center;
                        font-size: 12px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #B11E24;
                        
                        img {
                            width: 11px;
                            height: 12px;
                            margin-left: 5px;
                        }
                    }
                    
                    .group_tab {
                        .box_items {
                            display: flex;
                            align-items: flex-start;
                            margin-bottom: 6px;
                            
                            .group_names {
                                display: flex;
                                align-items: center;
                                font-size: 14px;
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                                color: #B11E24;
                                margin-right: 36px;
                                width: 120px;
                                
                                img {
                                    width: 16px;
                                    height: 18px;
                                    object-fit: contain;
                                    margin-right: 6px;
                                }
                            }
                            
                            .group_twos {
                                width: 512px;
                                display: flex;
                                flex-wrap: wrap;
                                
                                .group_tab_right {
                                    font-size: 12px;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    color: #000000;
                                    width: 76px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    margin-right: 68px;
                                    margin-bottom: 9px;
                                }
                                
                                .group_tab_right:nth-child(4n) {
                                    margin-right: 0;
                                }
                            }
                        }
                    }
                    
                    .tab_chang_caser_infos {
                        display: flex;
                        
                        .tab_infos_case {
                            margin-right: 37px;
                            
                            .parent_titles {
                                font-size: 14px;
                                font-family: Microsoft YaHei;
                                font-weight: bold;
                                color: #000000;
                                margin-bottom: 17px;
                            }
                        }
                        
                        ul {
                            margin: 0px;
                            padding: 0px;
                            width: 100px;
                            column-count: 1;
                            -webkit-column-break-inside: avoid;
                            height: 148px;
                        }
                        
                        ul li {
                            list-style: none;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            font-size: 12px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #000000;
                            margin-bottom: 21px;
                        }
                    }
                }
            }
        }
        
        .top_info_active_case {
            z-index: 9;
            transition: all 0.3s linear;
            display: block;
        }
        
        .new_tabs_serve {
            z-index: 9;
            display: block;
            transition: all 0.3s linear;
        }
        
        .new_tabs_transm {
            z-index: 9;
            display: block;
            transition: all 0.3s linear;
        }
    }
</style>
